<template>
	<widget-root :styles="styles">
		<view class="user-order" :style="{
	                'background-color': styles.bg_color, 
	                'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx`
	            }">
			<view class="order-title flex row-between">
				<view class="bold">服务订单</view>
				<router-link to="/others/pages/order_list/order_list?mode=all">
					<view class="sm muted">全部订单<u-icon name="arrow-right"></u-icon>
					</view>
				</router-link>
			</view>
			
			<view class="order-nav flex">
				<router-link class="nav-item" to="/others/pages/order_list/order_list?mode=pay">
					<view class="flex-col col-center">
						<view class="badge-wrap">
							<u-image width="50rpx" height="50rpx" src="/static/images/fuwu1.png" />
							<!-- <u-badge v-if="userInfo.wait_pay" type="error"  :count="userInfo.wait_pay" :offset="[-10, -20]"></u-badge> -->
						</view>
						<view class="xs m-t-12">待付款</view>
					</view>
				</router-link>
				<router-link class="nav-item" to="/others/pages/order_list/order_list?mode=delivery">
					<view class="flex-col col-center">
						<view class="badge-wrap">
							<u-image width="50rpx" height="50rpx" src="/static/images/fuwu2.png" />
							<!-- <u-badge v-if="userInfo.wait_delivery" type="error" :count="userInfo.wait_delivery" :offset="[-10, -20]"></u-badge> -->
						</view>
						<view class="xs m-t-12">服务中</view>
					</view>
				</router-link>
				<router-link class="nav-item" to="/others/pages/order_list/order_list?mode=finish">
					<view class="flex-col col-center">
						<view class="badge-wrap">
							<u-image width="50rpx" height="50rpx" src="/static/images/fuwu3.png" />
							<!-- <u-badge v-if="userInfo.wait_take" type="error" :count="userInfo.wait_take" :offset="[-10, -20]"></u-badge> -->
						</view>
						<view class="xs m-t-12">已完成</view>
					</view>
				</router-link>
			</view>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {

			}
		},
		methods: {
			
		},
		computed: {

		}
	};
</script>

<style lang="scss" scoped>
	.user-order {
		.order-title {
			border-bottom: $-solid-border;
			padding: 24rpx 30rpx;
		}

		.order-nav {
			padding: 26rpx 0;

			.nav-item {
				flex: 1;
				.badge-wrap {
					position: relative
				}
			}
		}
	}
</style>
